<template>
  <basic-dialog :visible="show"
                :isShowInnerLoading="isShowInnerLoading"
                minWidth="750px"
                title="实时数据分类"
                :isFullScreen="false"
                isShowBasicFooter
                @submit="submit"
                @close="show = false">
<!--    <q-form class="q-gutter-md dialog-content margin-t-20">-->
    <div class="font-size-12 text-grey padding-l-20" style="line-height: 40px">
      * 此分类适用于大屏页面“设备详情信息”；点位选择顺序即为大屏中的展示顺序
    </div>
    <div style="border: #D3D3D3 1px solid;border-radius:6px;margin: 0 20px;overflow: hidden">
      <tabs :tabList="classList" v-model="selTab" showNum @addTab="addClass" @deleteTab="delTab" :disableAddBtn="disableAddBtn()"/>
      <div class="content-box" style="width: 100%;height: 300px;padding: 16px 0 16px 16px">
        <template v-if="selTab !== null">
          <q-btn outline
                 label="选择点位"
                 color="primary"
                 class="q-mr-md"
                 icon="add"
                 style="vertical-align: top;width: 156px"
                 @click="addItem"
          />
          <div class="point" v-for="(item, index) in getClass()" :key="index">
            <div class="inline-block ellipsis" style="max-width: 116px">{{item}}<q-tooltip>{{item}}</q-tooltip></div>
            <q-icon
              class="close fr"
              name="iconfont icontubiao-89"
              @click="delPoint(item)"
            />
          </div>
        </template>
      </div>
    </div>
      <basic-dialog :visible="showCreate"
                    minWidth="300px"
                    title="新增"
                    :isFullScreen="false"
                    isShowBasicFooter
                    @submit="submitCreate"
                    @close="showCreate = false">
        <div class="padding-l-20 padding-r-20 padding-t-20">
          <q-form ref="form" class="dialog-content" greedy>
            <yz-input v-model="className"
                      :rules="[0]"
                      :hintRule="[val => !!val.trim() || '请输入非空字符']"
                      :maxlength="20"
                      title="分类名称"/>
          </q-form>
        </div>
      </basic-dialog>
<!--    </q-form>-->
    <set-point-group ref="setPoint" @setPoint="setPoint"/>
  </basic-dialog>
</template>

<script>
import tabs from 'src/components/tab'
import setPointGroup from './set-point-group'
import { getPointsGroup, savePointsGroup } from 'src/boot/status-monitor/machine'
import _ from 'lodash'
export default {
  name: 'classification',
  data () {
    return {
      isShowInnerLoading: false,
      show: false,
      showCreate: false,
      deviceId: null,
      classList: [],
      classification: {},
      selTab: null,
      className: '',
      flag: 0,
      submitting: false, // 提交状态
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  components: {
    tabs,
    setPointGroup
  },
  methods: {
    getClass () {
      return this.classification[this.selTab]
    },
    // 显示弹框
    showDialog (deviceId) {
      this.show = true
      this.deviceId = deviceId
      this.flag = 0
      this.initInfo()
    },
    // 初始化数据
    initInfo () {
      this.isShowInnerLoading = true
      getPointsGroup(this.deviceId).then(res => {
        const classList = []
        const classification = {}
        res.forEach(item => {
          classList.push({
            name: item.id,
            num: item.pointKeys.length,
            label: item.groupName
          })
          classification[item.id] = item.pointKeys
        })
        this.classification = { ...this.classification }
        this.classification = classification
        this.classList = classList
        this.selTab = classList.length ? classList[0].name : null
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    },
    addItem () {
      this.$refs.setPoint.showDialog(this.deviceId, this.classification, this.selTab)
    },
    setPoint (data) {
      this.classification = { ...this.classification }
      const selIndex = this.classList.findIndex(i => i.name === this.selTab)
      this.$set(this.classification, this.selTab, data)
      this.$set(this.classList[selIndex], 'num', data.length)
    },
    addClass () {
      this.className = ''
      this.showCreate = true
    },
    delPoint (data) {
      const selIndex = this.classList.findIndex(i => i.name === this.selTab)
      const pointList = _.cloneDeep(this.classification[this.selTab]).filter(item => item !== data)
      this.$set(this.classification, this.selTab, pointList)
      this.$set(this.classList[selIndex], 'num', pointList.length)
    },
    delTab (data) {
      this.$utils.showMessage('icontubiao-28', '请确认是否删除该分类？', () => {
        this.isShowInnerLoading = true
        const newList = _.cloneDeep(this.classList).filter(item => item.name !== data.name)
        this.classification[data.name] = []
        this.classList = []
        this.selTab = newList.length ? newList[0].name : null
        this.classList = newList
        this.$nextTick(function () {
          setTimeout(() => {
            this.isShowInnerLoading = false
          }, 500)
        })
      }, true)
    },
    submit () {
      let params = []
      this.classification = { ...this.classification }
      if (this.classList.length) {
        Object.keys(this.classification).forEach(item => {
          const selGroup = _.cloneDeep(this.classList).find(i => i.name === item)
          if (selGroup) {
            params.push({
              groupName: selGroup.label,
              pointKeys: this.classification[item]
            })
          }
        })
      }
      savePointsGroup(this.deviceId, params).then(res => {
        if (res.code === '1200') {
          this.$message.success('保存成功')
          this.show = false
        }
      })
    },
    // 禁用
    disableAddBtn () {
      const isNull = this.classList.filter(item => !item.num)
      console.log()
      return !!isNull.length
    },
    submitCreate () {
      this.$refs.form.validate(true).then(result => {
        if (result) {
          const name = `className_${this.flag}`
          this.flag++
          this.classList.push({
            name: name,
            num: 0,
            label: this.className
          })
          this.selTab = name
          this.classification = { ...this.classification }
          this.classification[name] = []
          this.showCreate = false
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .content-box{
    //border-top #D3D3D3 1px solid
    bowidth 100%
    height 300px
    margin-bottom 10px
  }
  .point{
    background-color #F1F1F1
    border-radius 3px
    display inline-block
    height 36px
    line-height 36px
    padding 0 12px
    width 156px
    margin-bottom 16px
    margin-right 16px
  }
  .close {
    margin-top 10px
    opacity 0.4
    cursor pointer
    &:hover {
      opacity 0.6
    }
  }
</style>
